{include file="public/user_header" /}

<!-- 内容区域 -->
<div style=" padding-left: 50px;">

    <!-- 正文区域 -->
    <div class="content">
        <div class="row" style="margin-left: 240px;">
            <div class="col-md-8">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">修改密码</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form id="updForm" role="form" method="post">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">原密码</label>
                                <input type="password" name="old_pwd" class="form-control" id="id_old_pwd" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">新密码</label>
                                <input type="password" name="new_pwd" class="form-control" id="id_new_pwd" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">确认新密码</label>
                                <input type="password" name="renew_pwd" class="form-control" id="id_renew_pwd" autocomplete="off">
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="reset" class="btn btn-default">reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <!-- 正文区域 /-->

</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}
<script>
    var commonUtil = {
        /**
         * 弹出消息框
         * @param msg 消息内容
         * @param type 消息框类型（参考bootstrap的alert）
         */
        alert: function(msg, type){
            if(typeof(type) =="undefined") { // 未传入type则默认为success类型的消息框
                type = "success";
            }
            // 创建bootstrap的alert元素
            var divElement = $("<div'></div>").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-3').addClass('col-md-offset-4');
            divElement.css({ // 消息框的定位样式
                "position": "absolute",
                "top": "80px"
            });
            divElement.text(msg); // 设置消息框的内容
            // 消息框添加可以关闭按钮
            var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
            $(divElement).append(closeBtn);
            // 消息框放入到页面中
            $('body').append(divElement);
            return divElement;
        },

        /**
         * 短暂显示后上浮消失的消息框
         * @param msg 消息内容
         * @param type 消息框类型
         */
        message: function(msg, type) {
            var divElement = commonUtil.alert(msg, type); // 生成Alert消息框
            var isIn = false; // 鼠标是否在消息框中

            divElement.on({ // 在setTimeout执行之前先判定鼠标是否在消息框中
                mouseover : function(){isIn = true;},
                mouseout  : function(){isIn = false;}
            });

            // 短暂延时后上浮消失
            setTimeout(function() {
                var IntervalMS = 20; // 每次上浮的间隔毫秒
                var floatSpace = 60; // 上浮的空间(px)
                var nowTop = divElement.offset().top; // 获取元素当前的top值
                var stopTop = nowTop - floatSpace;    // 上浮停止时的top值
                divElement.fadeOut(IntervalMS * floatSpace); // 设置元素淡出

                var upFloat = setInterval(function(){ // 开始上浮
                    if (nowTop >= stopTop) { // 判断当前消息框top是否还在可上升的范围内
                        divElement.css({"top": nowTop--}); // 消息框的top上升1px
                    } else {
                        clearInterval(upFloat); // 关闭上浮
                        divElement.remove();    // 移除元素
                    }
                }, IntervalMS);

                if (isIn) { // 如果鼠标在setTimeout之前已经放在的消息框中，则停止上浮
                    clearInterval(upFloat);
                    divElement.stop();
                }

                divElement.hover(function() { // 鼠标悬浮时停止上浮和淡出效果，过后恢复
                    clearInterval(upFloat);
                    divElement.stop();
                },function() {
                    divElement.fadeOut(IntervalMS * (nowTop - stopTop)); // 这里设置元素淡出的时间应该为：间隔毫秒*剩余可以上浮空间
                    upFloat = setInterval(function(){ // 继续上浮
                        if (nowTop >= stopTop) {
                            divElement.css({"top": nowTop--});
                        } else {
                            clearInterval(upFloat); // 关闭上浮
                            divElement.remove();    // 移除元素
                        }
                    }, IntervalMS);
                });
            }, 1500);
        }
    }
    
    /* 表单字段验证 */
    $('#updForm').bootstrapValidator({
        excluded: [":disabled", ":hidden", ":not(:visible)"], //不验证的情况
        message: '表单校验',
        /**
         * 生效规则（三选一）
         * enabled 字段值有变化就触发验证
         * disabled,submitted 当点击提交时验证并展示错误信息
         */
        live: 'enabled',
        /* button type为submit时无需额外绑定 */
        //验证字段以及规则
        fields: {

            old_pwd: {
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '原密码不能为空'
                    },
                    remote: {
                        type: "post",
                        url: "../index/checkPwd",
                        data: function (validator){
                            return {pwd: $('#id_old_pwd').val()}
                        },
                        delay:  800,//延迟发送请求（默认输入一个字符，提交一次，服务器压力太大）
                        message: "原密码不一致"
                    }
                }
            },
            new_pwd: {
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '新密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 10,
                        message: "密码长度须在6-10之间"
                    },
                    regexp : {
                        regexp : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/,
                        message : '密码由字母和数字组成，不能是纯数字或纯英⽂！'
                    }
                },
            },
            renew_pwd: {
                validators : {
                    notEmpty : {
                        message : '请再次输入新密码！',
                        equalTo : "#id_new_pwd"
                    },
                    identical : {
                        field : 'new_pwd',
                        message : '两次填写的密码不一致！'
                    }

                }
            }

        }
    }).on("success.form.bv",function (e){ //验证成功后提交表单
        $.ajax({
            url: "../index/doUpdPwd",
            type: "post",
            data: $('#updForm').serialize(),
            success: function (result){
                if (result.success)
                    alert("密码修改成功！");
                else
                    alert("密码修改失败！");
            }
        });
    });
</script>

</body>

</html>